<!doctype html>
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html lang="en" class="no-js"> <!--<![endif]-->
<head>
    <?php use_helper('I18N') ?>
    <?php include('scripts.php'); ?>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- CSS Styles -->
    <!-- <link rel="stylesheet" href="/css/style.css">-->
    <!-- <link rel="stylesheet" href="/css/colors.css">-->

    <!-- Google WebFonts -->
    <link href='http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic' rel='stylesheet'
          type='text/css'>
    <style type="text/css">
        .redbutton {
            background: #ae432e url('/images/btns/btn_red.png') repeat-x left top;
        }

        html, body {
            margin: 0;
            overflow: hidden;
        }

        #errMsg {
            background: #ae2a2a;
            color: #fff;
            font-size: 12px;
            padding: 5px 3px;
        }

        @charset "utf-8";
        /* CSS Document */
        html, body, div, span,
        h1, h2, h3, h4, h5, h6, p, blockquote, pre,
        a, abbr, acronym, address, big, cite, code,
        img, ins, kbd, q, s, samp,
        small, strike, strong,
        dl, dt, dd, ol, ul, li,
        fieldset, form, label, legend,
        table, caption, tbody, tfoot, thead, tr, th, td {
            margin: 0;
            padding: 0;
            border: 0;
            outline: 0;
            font-size: 100%;
            vertical-align: baseline;
            background: transparent;
        }
        body {
            line-height: 1;
            font-family:Arial, Helvetica, sans-serif; background:#E6E6E6 url(/images/login/main_bg.jpg) no-repeat top center; font-size:12px; color:#666;
        }
        ol, ul {
            list-style: none;
        }
        blockquote, q {
            quotes: none;
        }
        blockquote:before, blockquote:after,
        q:before, q:after {
            content: '';
            content: none;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
        }

        span {
            /*text-transform: lowercase;*/
        }
        a {color:#333;}
        a:hover {color:#666; text-decoration:none;}
        #container {width:950px; margin:0 auto;}
        p {line-height:16px;}
        /* header */
        #login {
            width:535px;
            margin:11% auto;
        }
        #login .logo {
            margin:10px 0;
        }
        #login .loginForm {
            width:535px;
            height:195px;
            background:#fff url('/images/login/login_bg.jpg') no-repeat left top;
            box-shadow:0px 0px 3px 3px #ccc;
        }
        #login .loginForm table {
            float: right;
            margin-top:35px;
        }
        #login .loginForm td {
            padding:5px;
        }
        #login .register {
            padding:10px;
            float: right;
        }
        #login .register a {
            text-decoration:none;
            color:#666;
        }
        #login .register a:hover {
            text-decoration:underline;
            color:#333;
        }
    </style>
    <script>
        $(function() {
            $("#lang").change(function() {
                $("#doAction").val("lang");
                $("#loginForm").submit();
            });

            $("#btnLogin").click(function() {

            });

            $("#captchaimage").bind('click', function() {
                $.post('/captcha/newSession');
                $("#captchaimage").load('/captcha/imageRequest');
                return false;
            });

            $("#loginForm").validate({
                        rules: {
                        <?php if (sfConfig::get('sf_environment') == Globals::SF_ENVIRONMENT_PROD) { ?>
                            captcha: {
                                required: true,
                                remote: "/captcha/process"
                            }
                            <?php } ?>
                        },
                        messages: {
                            captcha: "Correct captcha is required."
                        },
                        submitHandler: function(form) {
                            if ("" == $("#doAction").val()) {
                            <?php if (sfConfig::get('sf_environment') == Globals::SF_ENVIRONMENT_PROD) { ?>
                                if ($.trim($("#username").val()) == "") {
                                    alert("Shareholder ID cannot be blank.");
                                    $("#username").focus();
                                    return false;
                                }
                                if ($.trim($("#userpassword").val()) == "") {
                                    alert("Password cannot be blank.");
                                    $("#userpassword").focus();
                                    return false;
                                }
                                <?php } ?>
                            }

                            form.submit();
                        }
                    });
            /*alert("<p>致广大的股东们，</p>"
               + "<p>本公司为了解决少许的技术问题，将会在十二点正关闭股东登陆服务达三小时。请任何要报单的股东们稍后再报单或登陆。谢谢。 </p>"
               + "<p>MAPLEGOLDS 电脑管理部</p>"
                   + "<br>"
                   + "<p>Dear All Valued Shareholders, </p>"
                   + "<p>In order to solve a little technical issue, our company decided to shut down the shareholder login system for 3 HOURS time start from 12am. If there is any new registration, kindly do it after this down time. Thank you.</p>"
                   + "<p>MAPLEGOLDS IT Department</p>"
           + "</dl>");*/
        });
        function alert(data) {
            var msgs = "";
            if ($.isArray(data)) {
                jQuery.each(data, function(key, value) {
                    msgs = value + "<br>";
                });
            } else {
                msgs = data + "<br>";
            }

            var alertPanel = "<div style='margin-bottom: 20px; padding: 0 .7em;' class='ui-state-highlight ui-corner-all'><p><span style='float: left; margin-right: .3em;' class='ui-icon ui-icon-info'></span>";
            alertPanel += msgs + "</p></div>";
            $("#waitingLB h3").html(alertPanel);
            $.blockUI({
                        message: $("#waitingLB")
                        , css: {
                            border: 'none',
                            padding: '5px',
                            '-webkit-border-radius': '10px',
                            '-moz-border-radius': '10px',
                            'border-radius': '10px',
                            opacity: .9
                        }});
            $(".blockOverlay").css("z-index", 1010);
            $(".blockPage").css("z-index", 1011);
            $('.blockOverlay').attr('title', 'Click to unblock').click($.unblockUI);
        }
    </script>
</head>
<div id="waitingLB" style="display:none; cursor: default">
    <h3>We are processing your request. Please be patient.</h3>
</div>
<body class="login">
<form action="/home/doLogin" id="loginForm" method="post">
<input type="hidden" name="doAction" id="doAction" value="">
<div id="login">
    <div class="logo"><img src="/images/login/logo.png" alt="logo"/></div>
    <div class="loginForm">
        <table width="280" border="0" cellspacing="5" cellpadding="5">
          <tr>
            <td class="text"><?php echo __('Shareholder ID') ?></td>
            <td>
                <input type="text" name="username" id="username" class="large"
                                   value="<?php echo $username; ?>">
            </td>
          </tr>
          <tr>
            <td class="text"><?php echo __('Password') ?></td>
            <td>
                <input type="password" name="userpassword" id="userpassword" class="large"
                                   value="<?php echo $userpassword; ?>">
            </td>
          </tr>
          <tr>
            <td class="text"><?php echo __('Language') ?></td>
            <td>
                <select name="lang" id="lang">
                    <option value="en"
                            <?php
                                if ($sf_user->getCulture() == "en")
                                    echo 'selected'
                            ?>
                            >English
                    </option>
                    <option value="cn"
                            <?php
                                if ($sf_user->getCulture() == "cn")
                                    echo 'selected'
                            ?>
                            >中文
                    </option>
                </select>
            </td>
          </tr>
          <tr>
            <td colspan="2" align="right" style="padding-right:20px;padding-bottom:15px;">
                <?php if ($sf_flash->has('errorMsg')) { ?>
                <div class="notification error">
                    <p style="color: red"><strong><?php echo $sf_flash->get('errorMsg') ?></strong></p>
                </div>
                <?php
            }
                if ($appSetting->getSettingValue() == '0') {
                    ?>
                    <!-- <button type="submit" class="right redbutton">--><?php //echo __('Login') ?><!--</button>-->

                    <input type="image" src="/images/login/btn_login.png"
                        onmouseover="this.src='/images/login/btn_login_hover.png'"
                        onmousedown="this.src='/images/login/btn_login.png'"
                        onmouseout="this.src='/images/login/btn_login.png'" name="submit" id="button" value="Submit" />
                    <?php } ?>
            </td>
          </tr>
        </table>
	</div>
    <div class="register">
    	<a href="/member/register"><?php echo __('Register') ?></a> | <a href="/member/forgetPassword"><?php echo __('Forget Password?') ?></a>
    </div>
</div>

</form>
</body>
</html>